[Day 21 ] ASP.NET MVC初始框架

第 11 屆 iThome 鐵人賽

DAY 21

自我挑戰組

人生第一次的SideProject系列第 21 篇

11th鐵人賽

Emi

2019-10-07 23:31:14

1391 瀏覽

分享至

終於開始正式攻略ASP.NET了，雖然只有少少成果，不過也是努力很久的結晶，一開始方案表裡超多檔案都看傻眼了，研究到最後終於有點概念哪些東西要去哪個檔案改...

首先熟悉的是 ViewBag 用法，本來很疑惑內容到底都傳到哪裡去，對照著跑出來的網頁看過好幾次之後終於了解使用方法然後自己應用了一下，有點開心XD

另外還有許多@開頭的Razor語法，一開始用覺得還滿不習慣，會很想回到 HTML 傳統編寫方式，不過據說用習慣後比寫 HTML 方便很多，所以還是努力乖乖學吧。其中有幾個方法特地詳細查了一下，最後查到之前稍微聽過的「多載(overload)」這個字。簡單來說大概就是傳入不同參數就會跑不同method的意思，所以每個參數的意思也都要搞清楚才能熟悉使用...感覺坑越來越大了啊。

上一下今日進度：

HomeController.cs

using System.Web.Mvc;

namespace CoCtest.Controllers
{
    public class HomeController : Controller
    {
        public ActionResult Index()
        {
            return View();
        }

        public ActionResult Login()
        {
            ViewBag.Message = "Login page.";
            return View();
        }

        public ActionResult SignIn()
        {
            ViewBag.Message = "Sign In.";
            return View();
        }
    }
}

_Layout.cs.html

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title - CoC Charactor Card</title>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")
</head>
<body>
    <div class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                @Html.ActionLink("CoC Charactor Card", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })
            </div>
            <div class="navbar-collapse collapse ">
                <ul class="nav navbar-nav">
                    @*<li>@Html.ActionLink("首頁", "Index", "Home")</li>*@
                    <li>@Html.ActionLink("登入", "Login", "Home")</li>
                    <li>@Html.ActionLink("註冊", "SignIn", "Home")</li>
                </ul>
            </div>
        </div>
    </div>
    <div class="container body-content">
        @RenderBody()
        <hr />
        <footer>
            <p>© @DateTime.Now.Year - CoC Charactor Card</p>
        </footer>
    </div>
    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/bootstrap")
    @RenderSection("scripts", required: false)
</body>
</html>

Index.cshtml

@{
    ViewBag.Title = "我的角色卡";
}
<div class="jumbotron">
    <h1>CALL of CTHULHU</h1>
    <h3>Charactor Card</h3>
    <p><a href="https://asp.net" class="btn btn-primary btn-lg">Start Now »</a></p>
</div>

@{
    ViewBag.Title = "Login";
}

<h2>Login</h2>
<hr />
<label id="email" for="email">電子信箱</label>
<br />
<input type="email" name="email" id="email" placeholder="Email" />
<br />
<br />
<label id="password" for="password">密碼</label>
<br />
<input type="password" name="password" id="password" placeholder="password" />

Login頁面的表單目前是用 HTML 偷吃步的，ASP.NET整個表單套用似乎有點複雜，明天就來努力這一塊吧～

= = = = =